<template>
	<div>
		<div class="container">
			<div class="div_class_Title">
				<span>[</span> About Us <span>]</span>
			</div>
			<p class="p_class_text">Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent. per conubia nostra, per inceptos himenaeos. Nullam ac urna eu felis dapibus condimentum sit. amet a augue.</p>
			<div class="div_class_FatherFrame">
				<div class="div_class_item" id = "div_id_item1">
					<div class="div_class_block">
						<h4><i class="glyphicon glyphicon-heart-empty" aria-hidden="false"></i>Web Development</h4>
						<span></span>
					</div>
					<p>Seunteger rutrum etiam processus dynamicusqui sequitur mutationem consuetudium lectorum. conubia nostra, per inceptos himenaeos. Nullam ac urna eu felis dapibus condimentum sit.</p>
				</div>
				<div class="div_class_item" id = "div_id_item2">
					<div class="div_class_block">
						<h4><i class="glyphicon glyphicon-globe" aria-hidden="true"></i>Web Marketing</h4>
							<span></span>
					</div>
						<p>Seunteger rutrum etiam processus dynamicusqui sequitur mutationem consuetudium lectorum. conubia nostra, per inceptos himenaeos. Nullam ac urna eu felis dapibus condimentum sit.</p>
				</div>
				<div class="div_class_item" id = "div_id_item3">
					<div class="div_class_block">
						<h4><i class="glyphicon glyphicon-flag" aria-hidden="true"></i>Web Marketing</h4>
						<span></span>
					</div>
						<p>Seunteger rutrum etiam processus dynamicusqui sequitur mutationem consuetudium lectorum. conubia nostra, per inceptos himenaeos. Nullam ac urna eu felis dapibus condimentum sit.</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	function loadAnimation(container_Id,aimation_name,offset){
		var contain_To_Top,window_ScrooTop,window_height,offset_To_Top;
    	offset_To_Top=$(container_Id).offset().top;
    	contain_To_Top=eval(offset_To_Top + offset); //字符串相加
    	window_ScrooTop =$(window).scrollTop();  //窗口滚动高度
    	window_height=$(window).height();//窗口高度

    	if(window_ScrooTop + window_height>contain_To_Top){
       		$((container_Id)).addClass((aimation_name));
     	}
	}
	$(document).ready(function(e){
		$(window).scroll(function(){
			loadAnimation("#div_id_item3","animate_positive",0);
			loadAnimation("#div_id_item2","animate_positive",0);
			loadAnimation("#div_id_item1","animate_positive",0);
		});
	});
	export default{

	}
</script>
<style scoped lang = 'scss'>
@import '../../assets/css/common.scss';
.div_class_Title{
  margin-top:1.6em; 
  text-align: center;
  font-size: 3.0em;
  color: #00a0af;
  font-family: 'Voltaire', sans-serif;
}
.p_class_text{
  font-size: 1.3em;
  text-align: center;
  width: 60%;
  margin: 2em auto 0;
  line-height: 1.8em;
  color: #2F455D;
}
.div_class_FatherFrame{
	margin-top:3em; 
}
.div_class_FatherFrame .div_class_item{
	margin-top: 3em; 
	padding:0em 1.3em;
	width: 32.9%;
	display: inline-block;
}
.div_class_block h4{
	font-size: 1.8em;
}
.div_class_block span {
  background: #00a0af;
  width: 51%;
  height: 3px;
  display: block;
}
.animate_positive{
	animation:route 2s;
	animation-fill-mode:forwards;
	animation-direction:alternate;
}
.div_class_block i {
  font-size: 1.8em;
  margin-right: 0.5em;
  color: #013040;
	vertical-align: sub;
}
.div_class_item p{
	font-size: 1.1em;
  text-align: left;
	line-height: 1.8em;
}
@-webkit-keyframes route{
	from { margin-left: -60em;
  }
  to{margin-left: 0em ;
	}
}
@keyframes route{
	from { margin-left: -60em;
  }
  to{margin-left: 0em ;
	}
}
@media(max-width: 414px){
	.div_class_FatherFrame .div_class_item{
		margin-top: 3em; 
		width: 100%;
		display: inline-block;
	}
	.p_class_text{
		font-size: 1em;
		text-align: center;
		width: 100%;
		margin: 2em auto 0;
		line-height: 1.8em;
		color: #2F455D;
	}
	.div_class_item p{
		font-size: 1.1em;
		text-align: center;
		line-height: 1.8em;
	}
	.div_class_block span{
		width: 100%;
		text-align: center;
	}
	.div_class_block h4{
		font-size: 1.0em;
		text-align: center;
	}
	@-webkit-keyframes route{
		from { margin-top: 60em;
  	}
  	to{margin-top: 0em ;
		}
	}
	@keyframes route{
		from { margin-top: 60em;
  	}
  	to{margin-top: 0em ;
		}
	}
}
@media screen and (min-width:414px) and (max-width:736px){
	.div_class_FatherFrame .div_class_item{
		text-align: center;
		margin-top: 3em; 
		width: 100%;
		display: inline-block;
	}
	.div_class_block span{
		width: 31%;
		margin:0em 36%;
		text-align: center;
	}
	.div_class_block h4{
	font-size: 1.3em;
	}
	.div_class_item p{
  text-align: center;
	}
	@-webkit-keyframes route{
		from { margin-top: 60em;
  	}
  	to{margin-top: 0em ;
		}
	}
	@keyframes route{
		from { margin-top: 60em;
  	}
  	to{margin-top: 0em ;
		}
	}
}
</style>